<%@page language="java" pageEncoding="UTF-8" contentType="text/html;charset=utf-8"%>
<%@include file="/includes/taglibs.jsp"%>
<%@page import="com.feib.soeasy.util.UserUtil"%>

<script type="text/javascript">
<!--
    $(document).ready(function() {          
        $("[id^='viewPayerBtn-']").click(function() {
            var payerPk = this.id.substring(13);
            doQueryPayerAction(payerPk);
            
        });
        
        
        $("[id^='viewPayerImg-']").click(function() {
            var payerPk = this.id.substring(13);
            doViewPayerAction(payerPk);
            
        });
        
        
    });
//-->
</script>

<c:choose>
    <c:when test="${null != actionBean.queryResult && not empty actionBean.queryResult.paginatedList}">
        <c:set var="lastPageNumber" value="${actionBean.queryResult.totalPageCount}"/>
        <c:set var="currentPageNumber" value="${actionBean.queryResult.pageNumber}"/>
        <c:set var="prePageNumber" value="${actionBean.queryResult.pageNumber - 1}"/>
        <c:set var="nextPageNumber" value="${actionBean.queryResult.pageNumber + 1}"/>
        
        
        <div id="paginationBar">
            <input type="button" id="firstPageBtn" value="第一頁" <c:out value='${prePageNumber<=0 ? "disabled": "" }'/> />
            <input type="button" id="prePageBtn" value="上一頁" <c:out value='${prePageNumber<=0 ? "disabled": "" }'/> />
                第 <input type="text" id="currentPageText" value="${currentPageNumber }" size="3" maxlength="4"> / ${lastPageNumber} 頁
            <input type="button" id="nextPageBtn" value="下一頁" <c:out value='${lastPageNumber<nextPageNumber ? "disabled": "" }'/> />
            <input type="button" id="lastPageBtn" value="最末頁" <c:out value='${lastPageNumber<=currentPageNumber ? "disabled": "" }'/> />
        </div>
        
            <table id="listTable">
            <thead>
                <tr>
                    <th>序號</th>
                    <%  if (UserUtil.isBankGroup()) {%>
                    <th>業者代號</th>
                    <%} %>
                    <th>編號</th>
                    <th>姓名</th>
                    <th>手機</th>
                    <th>E-MAIL</th>
                    <th>&nbsp;</th>
                </tr>
            </thead>
            <tbody>
                <c:forEach items="${actionBean.queryResult.paginatedList}" var="viewObj" varStatus="rowstat">
                <tr>
                    <td>${rowstat.index+1 }</td>
                    <%  if (UserUtil.isBankGroup()) {%>
                    <td>
                        <c:if test="${null != viewObj.group}">
                            <c:out value="${viewObj.group.groupNo }"/>
                        </c:if>                        
                    </td>
                    <%} %>
                    <td><c:out value="${viewObj.payerNo }"/></td>
                    <td><c:out value="${viewObj.payerName }"/></td>
                    <td><c:out value="${viewObj.payerCellNo }"/></td>
                    <td><c:out value="${viewObj.payerEmail }"/></td>
                    
                    <td>
                        <input type="button" class="formBtn" id="viewPayerBtn-<c:out value='${viewObj.payerPk}'/>" name="viewPayerBtn-<c:out value='${viewObj.payerPk}'/>" value="修改" />
                        <div style="float: left; margin: 2px 3px 0;" id="viewPayerImg-<c:out value='${viewObj.payerPk}'/>"><a href="javascript: void(0)" class="btnZoom">查詢</a></div>
                    </td>               
                </tr>
                </c:forEach>
            </tbody>
        </table>
		<div id="paginationBar">
			<input type="button" id="printBtn2" value="列印" />
		</div>
            
        <script type="text/javascript">
        <!--
        $(document).ready(function() {
            $("[id^='firstPageBtn']").click(function() {
                doQueryAction(1);
            });
            
            $("[id^='prePageBtn']").click(function() {
                doQueryAction(<c:out value='${prePageNumber}'/>);
            });
            
            $("[id^='nextPageBtn']").click(function() {
                doQueryAction(<c:out value='${nextPageNumber}'/>);
            });
            
            $("[id^='lastPageBtn']").click(function() {
                doQueryAction(<c:out value='${lastPageNumber}'/>);
            });
            
            $("[id^='currentPageText']").change(function() {
                var value = this.value;
                if (value != ''){
                    value = value.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
                    var intRegex = /^\d+$/;
                    if(!intRegex.test(value)) {
                        alert('頁數必須是整數');
                        return ;
                    }
                    
                    value = parseInt(value, 10);
                    
                    if (value < 1){
                        alert('頁數必須是大於1');
                        return ;
                    }
                    else if (value > <c:out value='${lastPageNumber}'/>){
                        alert('頁數必須是小於總頁數 (<c:out value='${lastPageNumber}'/>)');
                        return ;
                    }
                    else if (value != <c:out value='${currentPageNumber}'/>){
                        doQueryAction(value);
                    }
                    
                }
                else{
                    alert('頁數不可為空白');
                    return ;
                }
            });
            
            $('#printBtn2').click(function() {
				divPrint('queryResultDiv');
			});
            
        });
        //-->
        </script>
            
    </c:when>
    <c:otherwise>
        <div id="queryNothingBlockDiv" style="display: none;">查無資料 </div>      
        <script type="text/javascript">
        <!--
        $(document).ready(function() {
            $( "#queryNothingBlockDiv" ).dialog( "destroy" );
            $( "#queryNothingBlockDiv" ).dialog({  
                title:'<%=UserUtil.getCurrentMenuItemName() %>查詢' 
                , width: 300
                , resizable: false
                , modal: true,
                buttons : {
                    Ok : function() {
                        $(this).dialog("close");
                    }
                }  
            });
        });
        //-->
        </script>
    </c:otherwise>
</c:choose>
